<!DOCTYPE html>

<html lang="en" dir="ltr">
    <head>

        <meta charset="utf-8">
        <title>非暴力沟通</title>
        <!-- div细节 -->
        <style media="screen">
            body,td,th {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 50px;
                margin: 0;
            }
            /* 顶栏导航 */
            .navigation {
                width: 100%;
                background-color: #1e6fdf;
                position: fixed;
                z-index: 5;
                display: flex;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
            }
            .navigation a {
                flex:1;
                text-align: center;
                text-decoration: none;
                color: white;
                padding: 10px;
            }

            /* 标题 */
            .top {
                background-color: #5d9bf1;
                width:100%;
                overflow: auto;

            }
            .top_title {
                padding-top: 90px;
                padding-left: 30px;
                font-size: 90px;
                font-weight: 900;
                margin-top: 50px;

            }
            .top p {
                color: white;
                padding-left: 30px;
                padding-bottom: 30px;
                font-size: 40px;
            }
            /* 代码链接部分 */
            .code {
                width:33%;
                margin-left: 62%;
                margin-top: 20px;
                margin-bottom: 20px;
                background-color: #ff9900;
                border-radius:35px;
                height:70px;
                text-align: center;
            }
            .code a {
                text-decoration: none;
                color: white;
                padding-left: 20px;
            }
            /* 标题 */
            .titleSecond {
                margin-top: 50px;
                margin-bottom: -50px;
                margin-left: 30px;
            }
            .title_back {
                background-color: #ff9933;
                width: 10%;
                height: 70px;
                position: relative;
                left: -5%;
                border-radius: 16px;
            }
            .title_name {
                position: relative;
                top:-70px;
                font-weight: 600;
                font-size: 60px;
                line-height: 70px;

            }
            /* 设计理念 */
            .notion {
                position: relative;
                width:100%;
                display: flex;
                justify-content: center;
            }

            .notion_content {
                width:90%;
                margin:20px;
            }
            .notion_show {
                cursor:pointer;
                width: 100%;
                height:120px;
                background-color:#1e6fdf;
                border-radius: 25px;
                border: 5px solid white;
                box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
                display: flex;

            }
            .notion_text {
                text-align: left;
                padding-left: 10%;
                line-height: 120px;
                color:white;
                font-size: 60px;
                font-weight: 500;
                width: 75%;

            }
            .icon-xiala {
                margin: 20px;
                transform: rotateX(0deg);
            }
            .notion_hide p{
                margin: 0% 2%;
                display:block;
                color:#666666;
            }
            .notion_hide {
                margin: 0 auto;
                width: 95%;
                display:none;
                border:5px solid #1e6fdf;
                border-radius: 0px 0px 16px 16px;
                border-top: none;
            }
            /* 用户分析部分 */
            .person {
                position: relative;
                width:100%;
            }
            .personBox {
                display: flex;
                margin: 2%;
            }
            .person1 {
                background: #0d9eea;
                width:48%;
                margin:2%;
                text-align: left;
                border-radius: 16px;
                display: flex;
                flex-direction: column;
            }
            .person2 {
                background: #e41d4c;
                width:48%;
                margin:2%;
                text-align: center;
                text-align: left;
                border-radius: 16px;
                display: flex;
                flex-direction: column;
            }
            .person_title {
                font-size: 75px;
                color: white;
                margin: 3%;
                margin-bottom: 5%;
            }
            .person_content {
                font-size: 50px;
                color: white;
                margin: 3%;
                margin-bottom: 10%;
            }
            .person1 p {
                font-size: 250px;
                font-weight: 900;
                color: #086ea4;
                margin: 0;
                margin-left: 50%;
                align-self: flex-end;
            }
            .person2 p {
                font-size: 250px;
                font-weight: 900;
                color: #ae062e;
                margin: 0;
                margin-left: 50%;
                align-self: flex-end;
            }
            /* 情景部分 */
            .situation {
                width: 100%;
            }
            .situation_back {
                width: 100%;
                height: 500px;
                background-color: #1b70dd;
                position: relative;
                top: -400px;
                margin-bottom: -400px;
                z-index: -1;
            }
            .situation_container {
                display: flex;
                flex-direction: row;
                width: 100%;
                overflow:hidden;
                overflow-x:scroll;
            }
            .situation_content {
                flex: 0 0 60%;
                margin: 2%;
            }
            .situation_title {
                font-weight: 700;
                margin-left: 3%;
                margin-bottom: 0px;
            }
            .situation_img {
                width: 100%;
            }
            /* 问题与方案 */
            .qa {
                width: 100%;
                margin: 0;
            }
            .qa_container {
                width:96%;
                margin: 2%;

                display: flex;
                border-radius: 20px;
                background-color: #d4e0f2;
            }
            .question {
                width:56%;
                margin:2%;
            }
            .question p {
                margin: 1%;
                font-weight: 500;
            }
            .answer {
                width: 40%;
                height: inherit;

                border-radius: 20px;
                margin-right: 0;
                background-color: #1e6fdf;
            }
            .answer h3 {
                margin-left: 5%;
                margin-top: 5%;
                margin-bottom: 2%;
                color: #ff9900;
            }
            .answer p {
                margin-left: 5%;
                color: white;
                margin-top: 2%;
            }
            /* 设计要点 */
            .point {
                margin: 0;
                width: 100%;
            }
            .pointContainer {
                margin:0;
                display: flex;
                width: 100%;
                flex-wrap: wrap;
            }
            .pointContainer p {
                margin: 1.5%;
                margin-top: 3%;
            }
            .pointContainer h3 {
                text-align: center;
                margin-top: 3%;
                margin-bottom: 3%;
                font-size: 70px;
            }
            .pc_big {
                width: 55%;
                margin: 2% 1% 1% 2%;
                background-color: #1e6fdf;
                border-radius: 16px;
                color: white;
            }
            .pc_little {
                width: 37%;
                margin: 2% 1% 1% 2%;
                background-color: #d4e0f2;
                border-radius: 16px;
                color: black;
            }

            /* 使用流程 */
            .process {
                display: flex;
                flex-direction: column;
                margin:0;
                background: url(img/01_communication/process_back.png);
                background-repeat: no-repeat;
                background-size: 80%;
                background-position: top right;
            }
            .processBox {
                margin: 0% 2%;
            }
            .process_pre {
                width: 40%;
                text-align:left;
                padding-left: 5%;
                line-height: 120px;
                margin-top: 2%;
                margin-bottom: 2%;
                height: 120px;
                border-radius: 16px;
                background-color: #808080;
                color: white;

            }
            .process_content {
                width: 100%;
                text-align: center;
                line-height: 120px;
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin-top: 2%;
                margin-bottom: 2%;
                height: 120px;
                border-radius: 16px;
                background-color: #1e6fdf;
                color: white;


            }
            .process_title {
                width: 100%;
                text-align: left;
                padding-left: 5%;
            }
            .process4_1 {
                width: 32%;
                margin: 0%;
                margin-top: -10px;
                border-radius: 0px 0px 12px 12px;
                border: 1px solid white;
                background-color: #5d9bf1;
                border-top-color: 1px solid black；
                color: white;
            }

            /*  */

            .swiper-container {
                --swiper-pagination-color: #ff9900;
            }
            .swiper-slide p {
                margin: 2%;
                font-weight: bold;

            }


        </style>

        <!-- 轮播图 -->
        <link rel="stylesheet" href="js/swiper-master/package/swiper-bundle.min.css">
        <style media="screen">
        .swiper-container {
            width: auto;
            height:auto;
        }
        .swiper-slide {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .swiper-slide img {
            width: 90%;
        }
        </style>
        <!-- iconfont -->
        <link rel="stylesheet" href="css/iconfont/iconfont.css">

    </head>
    <body>
        <!-- 顶栏 -->
        <div class="navigation">
            <a href="#"></a>
            <a href="http://www.yueqingyang.ink/">首页</a>
            <a href="http://www.yueqingyang.ink/second">下一个</a>
        </div>

        <!-- 标题 -->
        <div class="top">
            <div class="top_title">
                非暴力沟通
            </div>
            <p>--致力于缓解亲密关系中争吵，理清各方需求的应用</p>
        </div>
        <!-- 码云链接 -->
        <div class="code">
            <a href="https://gitee.com/yue-qingyang/portfolio-project">代码细节></a>
        </div>
        <!-- 设计理念 -->
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                1 设计理念
            </div>
        </div>
        <div class="notion" >

            <div class="notion_content">
            </div>
        </div>

        <!-- 用户 -->
        <div class="person">
            <div class="titleSecond">
                <div class="title_back"></div>
                <div class="title_name">
                    2 用户与情景
                </div>
            </div>
            <div class="personBox">
                <div class="person1">

                </div>
                <div class="person2">

                </div>
            </div>

        </div>
        <!-- 情景分析 -->
        <div class="situation">
            <div class="situation_container">
            </div>
            <div class="situation_back"></div>
        </div>
        <!-- 问题和方案 -->
        <br>
        <br>
        <div class="titleSecond">
            <a name="toc0"></a>
            <div class="title_back"></div>
            <div class="title_name">
                3 问题 => 方案
            </div>
        </div>
        <div class="qa">
        </div>
        <!-- 设计要点 -->
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                4 设计要点
            </div>
        </div>
        <div class="point">
            <div class="pointContainer">
                <div class="pc_big">
                </div>
                <div class="pc_little">
                </div>
                <div class="pc_little">
                </div>
                <div class="pc_big">
                </div>
                <div class="pc_big">
                </div>
                <div class="pc_little">
                </div>
            </div>
        </div>
        <!-- 使用流程 -->
        <div class="process">
            <div class="titleSecond">
                <div class="title_back"></div>
                <div class="title_name">
                    5 使用流程
                </div>
            </div>
            <div class="processBox">
                <div class="process_back">
                </div>
                <div class="process_pre">
                    1.注册
                </div>
                <div class="process_pre">
                    2.添加好友
                </div>
                <div class="process_content">
                    <div class="process_title">
                        3.记录阶段
                    </div>
                </div>
                <div class="process_content">
                    <div class="process_title">
                        4.分析阶段
                    </div>
                    <div class="process4_1">
                        识别
                    </div>
                    <div class="process4_1">
                        匹配
                    </div>
                    <div class="process4_1">
                        总结
                    </div>
                </div>
            </div>

        </div>
        <!-- 细节 1 -->
        <br>
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                6 设计细节--记录阶段
            </div>
        </div>
        <div class="detail_1">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- 过程 -->
        <br>
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                7.0 设计细节--分析阶段流程
            </div>
        </div>
        <div class="detail_process">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- 细节 2.1 -->
        <br>
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                7.1 设计细节--分析阶段：识别
            </div>
        </div>
        <div class="detail_21">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- 细节 2.2 -->
        <br>
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                7.2 设计细节--分析阶段：匹配
            </div>
        </div>
        <div class="detail_22">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- 细节 2.3 -->
        <br>
        <br>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                7.3 设计细节--分析阶段：总结
            </div>
        </div>
        <div class="detail_23">

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                    <div class="swiper-slide">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!--  -->
        <br>
        <br>
        <!-- 样式相关js -->
        <script type="text/javascript">
            function g(Class) {
                var x = document.getElementsByClassName(Class);
                return x[0];
            }

        </script>
        <!-- 顶栏 -->
        <script type="text/javascript">
            // var headHeight = 280;
            // var nav = g("navigation")
            //
            // window.onscroll = function () {
            //         var temp = top.scrollY
            //         if (temp > headHeight) {
            //             // nav.style.display = "block"
            //             nav.style.position = "fixed"
            //         } else {
            //             // nav.style.display = "none"
            //             nav.style.position = "absolute"
            //         }
            //     }

        </script>
        </script>
        <!-- 内容伸展 -->
        <script type="text/javascript">

            window.onload = function(){
                // nav对象有了一个click时，运行函数
                g("notion_content").onclick = function(e){
                    // e 是返回的事件，提供了一系列内容
                    var src = e?e.target:event.srcElement;
                    if(src.className == "notion_text" || "iconfont icon-xiala"){
                        // 获取 父节点，然后获取父节点的下一个兄弟节点
                        var parent = src.parentNode
                        var next = parent.nextElementSibling || parent.nextSibling;
                        next.style.display = (next.style.display =="block")?"none":"block";
                        var last = parent.lastElementChild
                        last.style.transform = (last.style.transform == "rotateX(180deg)")? "rotateX(0deg)":"rotateX(180deg)";
                    }
                 }
            }
        </script>
        <!-- 轮播图 -->
        <script src="js/swiper-master/package/swiper-bundle.min.js"></script>
        <script>
            var mySwiper = new Swiper
             ('.swiper-container', {
                loop: false, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        </script>
        <!-- 请求数据 -->
        <script type="text/javascript">
            //创建一个 ajax 对象
            // 参数是一个请求
            var ajax = function(request) {
                // request “请求”是一个对象，有以下属性
                // method:请求方法，string
                // url: 请求路径, string
                // data: 发送的请求数据(非GET方法), string
                // callback: 处理请求的回调函数, function
                var r = new XMLHttpRequest()
                r.open(request.method, request.url, true)
                //内容类型
                if (request.contentType !== undefined) {
                    r.setRequestHeader('Content-Type', request.contentType)
                }
                r.onreadystatechange = function(event) {
                    if(r.readyState === 4) {
                        request.callback(r.response)
                    }
                }
                // 判断是get要数据，还是post发数据
                if (request.method === "GET") {
                    r.send()
                } else {
                    r.send(request.data)
                }
            }



            // 插入notion
            var insertNotion = function(contents) {
                var html = ''
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var content = b.content
                    var inserthtml = `
                    <div class="notion_show">
                        <div class="notion_text">${name}</div>
                        <span class="iconfont icon-xiala"></span>
                    </div>
                    <div class="notion_hide">
                        <p>${content}</p>
                    </div>
                    `
                    html += inserthtml
                }
                var div = g("notion_content")
                div.innerHTML = html
            }
            var getNotion = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/notion",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertNotion(temp)
                    }
                }
                ajax(request)
            }
            // 插入 person
            var insertPerson= function(contents) {
                var html = ''
                var fatherDiv = g("personBox")
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var content = b.content
                    var sign = b.sign
                    var inserthtml = `
                    <div class="person_title">
                        ${name}
                    </div>
                    <div class="person_content">
                        ${content}
                    </div>
                    <p>
                        ${sign}
                    </p>
                    `
                    var childDiv = fatherDiv.children[i]
                    childDiv.innerHTML = inserthtml
                }
            }
            var getPerson = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/person",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertPerson(temp)
                    }
                }
                ajax(request)
            }
            // 插入 情景图片
            var insertSituation = function(contents) {
                var html = ''
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var picture = b.picture
                    var inserthtml = `
                    <div class="situation_content">
                        <p class="situation_title">${name}</p>
                        <img class="situation_img" src=${picture}>
                    </div>
                    `
                    html += inserthtml
                }
                var div = g("situation_container")
                div.innerHTML = html
            }
            var getSituation = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/situation",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertSituation(temp)
                    }
                }
                ajax(request)
            }
            //插入 qa
            var insertQa = function(contents) {
                var html = ''
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var question = b.question
                    var answer = b.answer_title
                    var content = b.content
                    var inserthtml = `
                    <div class="qa_container">
                        <div class="question">
                            <p>${question}</p>
                        </div>
                        <div class="answer">
                            <h3>${answer}</h3>
                            <p>${content}</p>
                        </div>
                    </div>
                    `
                    html += inserthtml
                }
                var div = g("qa")
                div.innerHTML = html
            }
            var getQa = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/qa",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertQa(temp)
                    }
                }
                ajax(request)
            }
            // 插入point
            var insertPoint= function(contents) {
                var html = ''
                var fatherDiv = g("pointContainer")
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var content = b.content
                    var inserthtml = `
                    <h3>${name}</h3>
                    <p>${content}</p>
                    `
                    var childDiv = fatherDiv.children[i]
                    childDiv.innerHTML = inserthtml
                }
            }
            var getPoint = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/point",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertPoint(temp)
                    }
                }
                ajax(request)
            }
            // 插入 细节部分共用
            var insertDr = function(contents, goal) {
                var html = ''
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var picture = b.picture
                    var inserthtml = `
                    <div class="swiper-slide">
                        <p>${name}</p>
                        <img src="${picture}" alt="">
                    </div>
                    `
                    html += inserthtml
                }
                var div = g(goal)

                var div2 = div.children[0]
                var div3 = div2.children[0]
                div3.innerHTML = html
            }
            // 插入 细节1
            var getDr = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/dr",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "detail_1"
                        var temp = JSON.parse(response)
                        insertDr(temp, goal)
                    }
                }
                ajax(request)
            }
            // 插入process
            var getProcess = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/process",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "detail_process"
                        var temp = JSON.parse(response)
                        insertDr(temp, goal)
                    }
                }
                ajax(request)
            }
            // 插入 细节2.1
            var getDa1 = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/da1",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "detail_21"
                        var temp = JSON.parse(response)
                        insertDr(temp, goal)
                    }
                }
                ajax(request)
            }
            // 插入 细节2.2
            var getDa2 = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/da2",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "detail_22"
                        var temp = JSON.parse(response)
                        insertDr(temp, goal)
                    }
                }
                ajax(request)
            }
            // 插入细节2.3
            var getDa3 = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/da3",
                    contentType: "application/json",
                    callback: function(response) {
                        var goal = "detail_23"
                        var temp = JSON.parse(response)
                        insertDr(temp, goal)
                    }
                }
                ajax(request)
            }

            var __insert = function() {
                getNotion()
                getPerson()
                getSituation()
                getQa()
                getPoint()
                getDr()
                getProcess()
                getDa1()
                getDa2()
                getDa3()
            }
            __insert()
        </script>

    </body>
</html>
